<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="阿福易购">
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />
    <!-- uc、qq浏览器 -->
    <meta name="screen-orientation" content="portrait">
    <meta name="full-screen" content="yes">
    <meta name="browsermode" content="application">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <meta name="HandheldFriendly" content="true">
    <meta name="MobileOptimized" content="320">
    <meta name="keywords" content="{{$SEO['keywords']}}"/>
    <meta name="description" content="{{$SEO['description']}}"/>
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <title>店铺_{{$SEO['title']}}</title>
    <link rel="stylesheet" href="{{ asset('/build/css/app.min.css') }}">
</head>
<body ontouchstart="">
<header class="ui-header ui-header-stable af-header">
    <ul class="ui-row-flex">
        <li class="ui-col ui-flex ui-flex-pack-start">
            <a ontouchstart="window.history.back();"><i class="ui-icon-return"></i></a>
        </li>
        <li class="ui-col ui-flex ui-flex-pack-center">
            <h1>店铺</h1>
        </li>
        <li class="ui-col ui-flex ui-flex-pack-end">
            <a data-href="/search?shop_id={{$shop->id}}"><i class="ui-icon-search"></i></a>
        </li>
    </ul>
</header>
@inject('pictureService','App\Interfaces\PictureService')


<div class="ui-container shop-page">
    <section class="ui-slider">
        <ul class="ui-slider-content">
            <li><span style="background-image:url('/build/images/shop_bg.png')"></span></li>
        </ul>
    </section>
    <ul class="ui-list ui-list-one ui-goods-shop">
        <li>
            <div class="ui-list-thumb">
                <span style="background-image:url('{{$pictureService::thumb($shop->shop_logo),180,72}}')"></span>
            </div>
            <div class="ui-list-info">
                <h4 class="ui-nowrap">阿福易购 <br><span>在售商品 {{$goods['total']}} 件</span></h4>
                <div class="ui-txt-info J-fav" data-id="{{$shop->id}}" data-status="{{$shopCollectionStatus}}">
                    <i class="ui-icon-trend af-txt-highlight"></i>
                    <p>@if($shopCollectionStatus==1)已收藏 @else 收藏 @endif</p>

                </div>
            </div>
        </li>
    </ul>

    <section class="ui-rec-goods">
        <h2>全部商品</h2>
        <ul id="scrollLoadGoods" data-url="/shop/get_goods?shop_id={{$shop->id}}" class="ui-rec-goods-item">
            @foreach($goods['data'] as $k=>$goods)
            <li @if($k%2==0) class="l" @else class="r" @endif >
                <div class="ui-goods-card">
                    <div data-href="/goods/show/{{$goods['goods_id']}}" class="ui-grid-halve-img af-border-b">
                        <span style="background-image:url('{{$pictureService::thumb($goods['goods_thumb']),254,254}}')"></span>
                    </div>
                    <div class="ui-goods-info">
                        <h3 data-href="/goods/show/{{$goods['goods_id']}}" class="ui-nowrap">{{$goods['goods_name']}}</h3>
                        <p><span class="shop-price">¥{{$goods['shop_price']}}</span><del class="market-price">¥{{$goods['market_price']}}</del></p>
                    </div>
                </div>
            </li>
            @endforeach

        </ul>
        <div class="ui-loading-wrap">
            <p>正在加载中...</p>
            <i class="ui-loading"></i>
        </div>
    </section>

</div>

<script src="{{ asset('/build/lib/zepto.min.js') }}"></script>
<script src="{{ asset('/build/js/frozen.js') }}"></script>
<script src="{{ asset('/build/js/app.min.js') }}"></script>
<script>
    $(function () {
        $('.J-fav').on('click',function () {
            var that=$(this),id=that.attr('data-id'),status=that.attr('data-status'), txtItem=that.find('p');
            //alert(txtItem.value());
            var data={
                type:'SHOP',
                reference_id:id,
                _token:_token
            };
            if(status==1){
                $.ajax({
                    url:'/collection/cancel',type:'post',dataType:'json',data:data,
                    success:function (res) {
                        if(res.id){
                            txtItem.text('收藏');
                            that.attr('data-status',0);
                        }
                    },
                    error:function (error) {
                        topTip(error.message||'服务器忙，请刷新重试');
                    }
                })
            }else{
                $.ajax({
                    url:'/collection/add',type:'post',dataType:'json',data:data,
                    success:function (res) {
                        if(res.id){
                            txtItem.text('已收藏');
                            that.attr('data-status',1);
                        }
                    },
                    error:function (error) {
                        topTip(error.message||'服务器忙，请刷新重试');
                    }
                })
            }
        });
    })
</script>
<script>
//$('').on('click',function(){
//});
</script>
</body>
</html>